<template>
  <div class="table-container">
    <el-table
      v-bind="$attrs"
      :data="data"
      border
      v-loading="loading"
      :header-cell-style="{
        background: '#f5f7fa',
        color: '#606266',
        fontWeight: 'bold'
      }"
    >
      <template v-for="(column, index) in columns" :key="index">
        <el-table-column v-bind="column">
          <template v-if="column.slot" #default="scope">
            <slot :name="column.slot" :row="scope.row" :index="scope.$index" />
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';

interface Column {
  prop?: string;
  label?: string;
  width?: string | number;
  minWidth?: string | number;
  fixed?: boolean | 'left' | 'right';
  slot?: string;
  [key: string]: any;
}

interface Props {
  data: any[];
  columns: Column[];
  loading?: boolean;
}

defineProps<Props>();
</script>

<style lang="scss" scoped>
.table-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

  :deep(.el-table) {
    --el-table-border-color: #ebeef5;
    --el-table-header-bg-color: #f5f7fa;

    .el-table__header th {
      font-weight: 600;
    }
  }
}
</style> 